<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="includes.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<% String basePath = request.getContextPath();%>
<% String baseCSSPath = request.getContextPath()+"/resources/css";%>
<% String baseJSPath = request.getContextPath()+"/resources/js";%>
<% String baseImagePath = request.getContextPath()+"/resources/images";%>

    <title>Nivo Slider Demo</title>
    
    <link rel="stylesheet" href="<%=baseCSSPath %>/nivo-slider/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="<%=baseCSSPath %>/nivo-slider/light/light.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="<%=baseCSSPath %>/nivo-slider/dark/dark.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="<%=baseCSSPath %>/nivo-slider/bar/bar.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="<%=baseCSSPath %>/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="<%=baseCSSPath %>/nivo-slider/style.css" type="text/css" media="screen" />
</head>
<body>
    <div id="wrapper">
        <a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a>

        <div class="slider-wrapper theme-light">
            <div id="slider" class="nivoSlider">
                <img src="<%=baseImagePath %>/toystory.jpg" data-thumb="<%=baseImagePath %>/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="<%=baseImagePath %>/up.jpg" data-thumb="<%=baseImagePath %>/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="<%=baseImagePath %>/walle.jpg" data-thumb="<%=baseImagePath %>/walle.jpg" alt="" data-transition="slideInLeft" />
                <img src="<%=baseImagePath %>/nemo.jpg" data-thumb="<%=baseImagePath %>/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
            </div>
        </div>

    </div>
    <script src="<%=baseJSPath %>/jquery-1.js" type="text/javascript" ></script>
    <script src="<%=baseJSPath %>/jquery.nivo.slider.js" type="text/javascript" ></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
</body>
</html>